<template>
    <el-container >
        <el-header class="head1" style="width: 100%;height: 85px">
            <i class="el-icon-my-statistic"></i>
            <el-button class="el-button1" type="success" style="margin-left: 900px ;margin-right: 30px;margin-top: 20px"  plain>
                <router-link   to="/gk" style="color: rgba(39,170,51,0.66)" >知识问答</router-link>
            </el-button>
            <el-button class="el-button1" type="success" style="margin-right: 30px"   @click="dialogVisible = true" plain>关于我们</el-button>
            <el-dialog
                    title="关于我们"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
                <span>第11组课设</span>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
            </el-dialog>
            <el-button class="el-button1" type="success" style="margin-right: 20px"  @click="dialogVisible1 = true" plain>联系我们</el-button>
            <el-dialog style="color: rgba(10,114,10,0.69)"
                       title="联系电话"
                       :visible.sync="dialogVisible1"
                       width="30%"
                       :before-close="handleClose">
                <span>15710454908</span>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
  </span>
            </el-dialog>
        </el-header>
        <el-header style="background-color: rgba(10,114,10,0.69);width: 100%;height: 80px">
            <h1 style="margin-top: 30px;text-align:center;font-size: 30px;color: white" > 基 于 服 装 领 域 的 知 识 问 答 系 统 </h1>
        </el-header>
        <div class="el-card__body">
        <el-table
                :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                style="width: 100%">
            <el-table-column
                    label="编号"
                    prop="sid">
            </el-table-column>
            <el-table-column
                    label="分类"
                    prop="name">
            </el-table-column>
            <el-table-column
                    label="标签"
                    prop="property">
            </el-table-column>
            <el-table-column
                    align="right">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="1000">
            </el-pagination>
        </div>
    </el-container>

</template>

<script>
    export default {
        name: "gk",
        data() {
            return {
                que:'',
                desc:'',
                ruleForm:[],
                dialogVisible: false,
                dialogVisible1: false,
                tableData: [{
                    sid: '001',
                    name: '女装',
                    property: '服装、女士'
                }, {
                    sid: '001',
                    name: '女装',
                    property: '服装、女士'
                }, {
                    sid: '001',
                    name: '女装',
                    property: '服装、女士'
                }, {
                    sid: '001',
                    name: '女装',
                    property: '服装、女士'
                }],
                search: ''
            }
        },
        created() {
            this.load()
        },
        methods: {
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            load() {
                this.request.get("/anwser", {
                    params: {
                        que: this.que,
                    }
                }).then(res => {
                    console.log(res)
                })
            },
        }
    }

</script>


<style scoped>
    .head1{
        /*background: url("../../assets/13.jpg");*/
    }
    .el-icon-my-statistic {
        background: url("../../assets/1.jpg") center no-repeat;
        background-size: contain;

        display: inline-block;
        width: 40px!important;
        height: 40px!important;
        margin-left: 6px;
        margin-top: 25px!important;
    }
    .el-dialog_header{
        background-color: #39a312!important;
    }
    .el-main{
        height: 800px !important;
    }

</style>
